<template>
    <div>
        <div class="showImg" >
            <!-- //轮播图片 -->
            <img  @mouseover="changeInterval(true)" 
                @mouseleave="changeInterval(false)"  
                v-for="(item) in imgArr" 
                :key="item.id"
                :src="item.url" 
                alt="暂无图片" 
                v-show="item.id===currentIndex" 
                >
            <!-- //左侧按钮 -->
            <div  @click="clickIcon('up')"   class="iconDiv icon-left"> 
                <i class="el-icon-caret-left"></i>
            </div>
            <!-- //右侧按钮 -->
            <div  @click="clickIcon('down')"  class="iconDiv icon-right">
                <i class="el-icon-caret-right"></i>
            </div>
            <!-- //控制圆点 -->
            <div class="banner-circle">
                <ul>
                    <li @click="changeImg(item.id)" 
                        v-for="(item) in imgArr" 
                        :key="item.id"
                        :class="item.id===currentIndex? 'active': '' "
                    ></li>
                </ul>
            </div>
        </div>
        <div class="container">  
            <div class="list-item">  
                <img src="../../static/img/homeImg/introImg1.png" alt="Item Image" class="item-image">  
                <span>专业资质与合规性</span>
                <div class="item-text">平台通过权威机构的认证与监督，确保所有服务均在批准业务范围和服务项目内开展，杜绝超业务范围或违法违规的诊疗活动。这为客户提供最基本的安全与信任保障。</div>  
            </div>  
            <div class="list-item">  
                <img src="../../static/img/homeImg/introImg2.png" alt="Item Image" class="item-image">  
                <span>先进设施与舒适体验</span>
                <div class="item-text">引进了一系列最先进的医疗设备，包括全新的彩色超声波、X射线等，确保检测结果准确和权威性。这些设备不仅提高诊断效率，也为体检者带来更加便捷和舒适的体验。</div>  
            </div>  
            <div class="list-item">  
                <img src="../../static/img/homeImg/introImg3.png" alt="Item Image" class="item-image">  
                <span>专业医生与护士团队</span>
                <div class="item-text">健景体检中心拥有一支由经验丰富的医生和耐心细致的护士组成的团队。他们不仅具备高超的医疗技能，还注重与客户的沟通，耐心解答疑问，提供个性化的健康建议。</div>  
            </div>  
            <div class="list-item">  
                <img src="../../static/img/homeImg/introImg4.png" alt="Item Image" class="item-image">  
                <span>贴心的服务细节</span>
                <div class="item-text">从客户进入体检中心的那一刻起，就有专业的导诊人员提供全程陪同服务。无论是体检前的准备工作还是体检后的注意事项，导诊人员都会耐心细致地为客户讲解和指导。</div>  
            </div>  
        </div> 
        <hr class="hr-space-square">
        <div class="intro">
            <span><b>关于健景</b></span>
            <span>
                健景体检中心平台创建于2024年8月,位于中国福建省云隐康谷，一个隐匿于崇山峻岭之间、云雾缭绕的神秘理疗圣地，
                自成立以来，沿着“以科技改变医疗健康产业”的宗旨，以“行者之心，永无止境”的信念，坚持自主研发多项医疗健康机构信息化产品,
                是一个专注于提供全面健康管理服务的综合性平台。
            </span>
            <span>
                该平台致力于通过先进的医疗技术和设备，为广大用户提供精准、高效的体检服务。
                健景体检中心平台不仅拥有专业的医疗团队和丰富的体检项目，还注重体检流程的便捷性和个性化服务，
                确保每位用户都能享受到舒适、安心的体检体验。 
            </span>
               
            
            <img src="../../static/img/homeImg/hospital.png">
        </div> 
        <hr class="hr-space-square">
        <div class="project">热门项目</div>
        <div class="container2">  
            <div @click="lookDetail(item)" class="list-item2" v-for="(item, index) in items" :key="index">  
                <img :src="item.projectImg" class="item-image2">  
                <div class="item-title2">{{ item.projectName }}</div>  
                <div class="item-price2">{{"价格:" + item.projectPrice+"元" }}</div>  
                <div class="item-text2">{{item.projectIntro }}</div>  
            </div>  
        </div>
        <hr class="hr-space-square">
        <div class="project">热门套餐</div>
        <div class="container2">  
            <div @click="lookCombination(item)" class="list-item2" v-for="(item, index) in combination" :key="index">  
                <img :src="item.combinationImg" class="item-image2">  
                <div class="item-title2">{{ item.combinationName }}</div>  
                <div class="item-price2">{{"价格:" + item.combinationPrice+"元" }}</div>  
                <div class="item-text2">{{item.combinationIntro }}</div>  
            </div>  
        </div>
    </div>


</template>
<script>
export default {
    data(){
        return {
            currentIndex :0,//当前所在图片下标
            timer:null,//定时轮询
            imgArr:[
                {	id:0,
                    url:require("@/static/img/homeImg/lunbo1.png"),
                },{
                    id:1,
                    url:require("@/static/img/homeImg/lunbo2.png"),
                }
            ],
            projectLen:8, //热门项目获取的个数
            combinationLen:4,//热门套餐的项目个数
            items: [] ,
            combination:[]
        }
    },	
    methods:{
        //开启定时器
        startInterval(){
            // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
            clearInterval(this.timer);
            this.timer = setInterval(()=>{
                this.currentIndex++;
                if(this.currentIndex > this.imgArr.length-1){
                    this.currentIndex = 0
                }
            },3000)
        },
        // 点击左右箭头
        clickIcon(val){
            if(val==='down'){
                this.currentIndex++;
                if(this.currentIndex===this.imgArr.length){
                    this.currentIndex = 0;
                }
            }else{
                // 第二种写法
                if(this.currentIndex === 0){
                    this.currentIndex = this.imgArr.length;
                }
                this.currentIndex--;
            }
        },
        // 点击控制圆点
        changeImg(index){
            this.currentIndex = index
        },
        //鼠标移入移出控制
        changeInterval(val){
            if(val){
                clearInterval(this.timer)
            }else{
                this.startInterval()
            }
        },
        getProjectInfo(){
            this.$axios.get(
                "/patient/getProjectInfo",
                {
                    params:{
                        projectLen:this.projectLen
                    }
                }
            ).then(res=>{
                this.items = res.data
            })
        },
        getCombinationInfo(){
            this.$axios.get(
                "/patient/getCombinationInfo",
                {
                    params:{
                        combinationLen:this.combinationLen
                    }
                }
            ).then(res=>{
                console.log(res)
                this.combination = res.data
                console.log(this.combination)
            })
        },
        lookDetail(item){
            console.log("projectItem",item)
            localStorage.setItem("projectItem",JSON.stringify(item));
            this.$router.push('/menu/detail')
            // this.$router.push({path:"/menu/detail",params:{projectItem:item}})
        },
        lookCombination(item){
            localStorage.setItem("combinationItem",JSON.stringify(item));
            this.$router.push('/menu/combination')
            // this.$router.push({path:"/menu/detail",params:{projectItem:item}})
        }
    },
    //进入页面后启动定时轮询
    mounted(){
        this.startInterval();
        this.getProjectInfo();
        this.getCombinationInfo();
    }
}

</script>
<style scoped>
* {
	padding: 0;
	margin: 0;
}
/* 清除li前面的圆点 */
li {
	list-style-type: none;
}
.showImg{
	position: relative;
	height: auto;
	overflow: hidden;
}
/* 轮播图片 */
.showImg img{
	width: 100%;
	height: 100%;
}

/* 箭头图标 */
.iconDiv{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border: 1px solid #666;
	border-radius: 15px;
	background-color: rgba(125,125,125,.2);
	line-height: 30px;
	text-align: center;
	font-size: 25px;
	cursor: pointer;
}
.iconDiv:hover{
	background-color: white;
}
.icon-left{
	left: 10px;
}
.icon-right{
	right: 10px;
}

/* 控制圆点 */
.banner-circle{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 20px;
}
.banner-circle ul{
	margin: 0 50px;
	height: 100%;
	text-align: right;
}
.banner-circle ul li{
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 5px;
	border-radius: 7px;
	background-color: rgba(125,125,125,.8);
	cursor: pointer;
}
.active{
	background-color: black !important; 
}
.container {  
  display: flex;  
  /* flex-direction: column; 如果想要列表垂直排列，否则可以删除这行   */
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 容器内的子项水平居中 */  
  width: 100%; /* 容器宽度 */  
  justify-content: center; /* 垂直居中（如果容器有固定高度） */  
}  
  
.list-item {  
  display: flex;  
  flex-direction: column; /* 使子元素垂直排列 */  
  align-items: center; /* 垂直居中子元素 */  
  text-align: center; /* 文字居中（可选，如果图片和文字不在同一行）*/  
  margin: 10px; /* 每个列表项之间的间距 */  
  /* 根据需要添加宽度、高度等样式 */  
  width: 24%;
  padding: 10px;

}  
.list-item span{
    color: rgb(92, 92, 247);
    font-size: 18px;
}
.item-image {  
  width: 200px; /* 根据需要调整 */  
  height: 200px; /* 保持图片比例 */  
  border-radius: 50%;

  margin-bottom: 10px; /* 图片和文字之间的间距 */  
}  
.item-text{
    font-size: 14px;

}
.hr-space-square {
    border: 0;
    color: #d0d0d5;
    background: linear-gradient(currentColor, currentColor) no-repeat center;
    background-size: calc(100% - 1.5em - 6px) 1px;
    display: flex;
    justify-content: space-between;
}
 .hr-space-square::before,
.hr-space-square::after {
    content: '';
    display: block;
    width: .75em; height: .75em;
    transform: rotate(45deg);
    box-sizing: border-box;
    border: 1px solid;
    margin: 3px;
}
.intro{
    margin-left: 20px;
    text-align: center; /* 水平居中 */ 
    margin-top: 2%;
}
.intro span{
    font-size: 20px;
    text-indent: 2em;
    width: 60%;
    float: left;
    text-align: left;

}
.intro b{
    margin-bottom: 2%;
    float: left;
    font-size: 30px;
    color: rgb(4, 129, 50);
    font-family: 'STXinwei', Courier, monospace;
}
.intro img{
    /* float: right; */
    width: 300px;
    height: auto;
    vertical-align: middle; /* 使图片垂直居中于文本基线 */  

}
.project{
    font-size: 30px;
    color: rgb(7, 70, 227);
    font-family: 'STHupo', Courier, monospace;
 
}
.container2 {  
  display: flex;  
  flex-wrap: wrap; /* 允许子元素换行 */ 
  /* flex-direction: column; 如果想要列表垂直排列，否则可以删除这行   */
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 容器内的子项水平居中 */  
  width: 100%; /* 容器宽度 */  
  justify-content: center; /* 垂直居中（如果容器有固定高度） */  
}  
.list-item2:hover{
    cursor: pointer;
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    box-shadow: 10px 10px 5px -4px rgba(49, 49, 49, 0.8);

}
.list-item2 {  
    border:1.5px solid rgb(119, 149, 240);
    display: flex;  
    flex-direction: column; /* 使子元素垂直排列 */  
    align-items: center; /* 垂直居中子元素 */  
    text-align: center; /* 文字居中（可选，如果图片和文字不在同一行）*/  
    margin: 10px; /* 每个列表项之间的间距 */  
    /* 根据需要添加宽度、高度等样式 */  
    width: 20%;
    height: 350px;
    padding: 10px;
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;

}  
.list-item2 span{
    color: rgb(92, 92, 247);
    font-size: 18px;
}
.item-image2 {  
    width: 200px; /* 根据需要调整 */  
    height: 200px; /* 保持图片比例 */  
    /* border-radius: 50%; */
    margin-bottom: 10px; /* 图片和文字之间的间距 */  
}
 
.item-text2{
    font-size: 14px;

}
.item-title2{
    font-family: 'STXingkai', Courier, monospace;

    font-size: 18px;
    color: black;
}
.item-price2{
    color:red;
    font-size: 16px;

}
</style>